import React from 'react'
import Remind from 'components/template/remind/remind'
import { Input, Row, Col, Select } from 'antd'
import WrapFormItem from "components/wrap-form-item"
const { Option } = Select;

export default {
  key: 'Remind',
  name: 'Remind 提醒',
  author: '吴程龙',
  description: '提醒设置需要的组件',
  isExampleFull: true,
  api: [
    {
      title: 'API',
      data: [
        {
          param: 'value', description: '内部表单组件的默认值，其中remindClients代表提醒方式的值，triggerType代表提醒类型的值，remindWarpValue为提醒时间的值。', type: 'object',
          defaultValue: '{ remindClients: [], triggerType: day, remindWarpValue: { remindTimes: [] } }'
        },
        {
          param: 'remindClientsOption', description: '提醒方式的选项，::该值为空数组时表单内不出现提醒方式::。', type: 'array',
          defaultValue: '[ { label: Web+APP推送, value: app }, { label: 钉钉, value: dingtalk }, { label: 邮件提醒, value: mail }, { label: 企业微信, value: wechat } ]'
        },
        {
          param: 'triggerTypeOption', description: '提醒类型的选项，::该值为空数组时表单内不出现提醒方式::。除默认的value以外，其余value都需要定义::component::,该值必须是一个完整的Node', type: 'array',
          defaultValue: '[ { label: 日重复提醒, value: DAY }, { label: 周重复提醒, value: WEEK }, { label: 月重复提醒, value: MONTH }, { label: 单次提醒, value: ONCE } ]'
        },
        {
          param: 'disabled', description: '表单内容是否可编辑', type: 'bool',
          defaultValue: 'false'
        }
      ],
      description: '提醒类型和提醒时间是级连关系，::除默认的提醒类型，其他需自己定义component为React Node::，值都存在表单内，要拿值调用getValue方法'
    }
  ],
  example: [
    {
      title: '基础用法',
      description: '',
      state: {},
      getMethod: context => {
        return { }
      },
      getContent: context => {
        return (
          <div>
            <Remind/>
          </div>
        )
      }
    },
    {
      title: '自定义提醒类型',
      description: '',
      state: {},
      getMethod: context => {
        return { }
      },
      getContent: context => {
        return (
          <div>
            <Remind
              triggerTypeOption={[
                { label: '日重复提醒', value: 'DAY' },
                {
                  label: '审批后提醒', value: 'APPROVE',
                  component: (
                    <WrapFormItem>
                      {(onChange,value) => (
                        <Row gutter={10}>
                          <Col span={4}>
                            <Input
                              value={value.lateDays}
                              onChange={e => onChange({lateDays: e.target.value})}
                            />
                          </Col>
                          <Col span={4}>
                            <Select
                              value={value.lateType}
                              style={{ width: '100%' }}
                              onChange={key => onChange({lateType: key})}
                            >
                              <Option key={'day'}>天</Option>
                              <Option key={'month'}>月</Option>
                            </Select>
                          </Col>
                          后
                        </Row>
                      )}
                    </WrapFormItem>
                  )
                }
              ]}
              value={{
                remindClients: ['app', 'mail'],
                triggerType: 'APPROVE',
                remindWarpValue: {
                  lateDays: '8',
                  lateType: 'day'
                }
              }}
            />
          </div>
        )
      }
    },
  ]
}
